<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    <title></title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.42.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/select-widget-min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js" ></script>
	
    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/drop-down.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/base.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/product-list.css" type="text/css"/>
    <script type="text/javascript">
		$(document).ready(function(){
			//alert(1);
		});
	</script>
	<style type="text/css">
		li{float:left;
		}
		#page_nav_area{
		text-align:center;
		}
	</style>
</head>

<body>
<%@include file="/WEB-INF/pages/front/common/cf_head.jsp" %>

<div class="product-con" id="product-con">
<h1 class="product-con_tit">公益众筹</h1>
    <div class="product-con_nav">
        <a class="lnav_bg" href="#"><i><img src="${pageContext.request.contextPath}/images/ii_04.png" alt=""/></i>全部</a>
        <a href="#" id="p1"><i><img src="${pageContext.request.contextPath}/images/ii_06.png" alt=""/></i>教育助学</a>
        <a href="#" id="p2"><i><img src="${pageContext.request.contextPath}/images/ii_08.png" alt=""/></i>爱心环保</a>
        <a href="#" id="p3"><i><img src="${pageContext.request.contextPath}/images/ii_10.png" alt=""/></i>扶贫助困</a>
        <a href="#" id="p4"><i><img src="${pageContext.request.contextPath}/images/ii_12.png" alt=""/></i>公益创业</a>
        <a href="#" id="p5"><i><img src="${pageContext.request.contextPath}/images/ii_14.png" alt=""/></i>公益活动</a>
           <div class="select-li">
               <span>状态:</span>
               <select name="drop2" class="ui-select">
               <option value="">全部</option>
               <option value="1" id="t1">待上架</option>
               <option value="2" id="t2">众筹中</option>
               <option value="3" id="t3">众筹成功</option>
           </select>
           </div>
        <div class="select-li2">
               <span>排序:</span>
               <select name="drop2" class="ui-select">
               <option value="">全部</option>
               <option value="1">全部2</option>
               <option value="2">全部4</option>
               <option value="3">全部5</option>
           </select>
           </div>

    </div>

    <div class="product-list-l">
        <!-- 内部放全部数据 -->
        <ul id="product-list-l">
        	
        </ul>
    </div>
<div class="product-ym" id="page_nav_area">
		<!-- 内部放翻页按钮 -->
		
</div>
</div>
<%@include file="/WEB-INF/pages/front/common/cf_bottom.jsp" %>
<script type="text/javascript">
	//页面加载完毕后，发送ajax请求，拿到分页数据
	$(function(){
		$.ajax({
			url:"getAllProjects",
			data:"pn=1",
			type:"GET",
			success:function(result){
				//解析并显示众筹项目数据
				//解析并显示分页数据
				build_pro_table(result);
				//显示分页按钮信息
				build_page_nav(result);
			}
		});
	});
	
	function to_page(pn){
		$.ajax({
			url:"getAllProjects",
			data:"pn="+pn, 
			type:"GET",
			success:function(result){
				//解析并显示pn页的数据
				build_pro_table(result);
				//显示分页按钮信息
				build_page_nav(result);
			}
		});
	} 
	
	function build_pro_table(result){
		//清空div
		$("#product-list-l").empty();
		var product=result.extend.pageInfo.list;
		$.each(product,function(index,item){
			//alert(item.psVideo);
			var proImg=$("<img/>").attr("src",item.psVideo);
			var proA=$("<a></a>").append(proImg).attr("href","tofontProductInfo?psId="+item.psId);
			//alert(item.psId)
			if(item.psType==1){
				var proType=$("<div></div>").addClass("product-one").append("待上架");
			}else if(item.psType==2){
				var proType=$("<div></div>").addClass("product-one").append("众筹中");
			}else if(item.psType==3){
				var proType=$("<div></div>").addClass("product-one").append("众筹成功");
			}
			var div1=$("<div></div>").addClass("product-list-lpic").append(proA).append(proType);
			var proA1=$("<a></a>").append(item.psName).attr("href","#");
			var proName=$("<p></p>").append(proA1);
			
			var Dcl=item.psGetmoney/item.psMoney*100;
			//alert(item.psMoney);
			var proDcl=$("<dt></dt>").append(Dcl).append("%");
			var proDname=$("<dd></dd>").append("达成率");
			var dl1=$("<dl></dl>").append(proDcl).append(proDname);
			var proMoney=$("<dt></dt>").append(item.psGetmoney);
			var proMname=$("<dd></dd>").append("已筹金额");
			var dl2=$("<dl></dl>").append(proMoney).append(proMname);
			var proPeople=$("<dt></dt>").append(item.psGetpeople);
			var proPname=$("<dd></dd>").append("支持人数");
			var dl3=$("<dl></dl>").append(proPeople).append(proPname);
			var div2=$("<div></div>").addClass("product-list-lmin").append(dl1).append(dl2).append(dl3);
			$("<li></li>").addClass("zcz")
			.append(div1)
			.append(proName)
			.append(div2)
			.appendTo("#product-list-l");
		});
	}
	
	function build_pro_table1(result){
		//清空div
		$("#product-list-l").empty();
		var product=result.extend.pro;
		$.each(product,function(index,item){
			//alert(item.psVideo);
			var proImg=$("<img/>").attr("src",item.psVideo);
			var proA=$("<a></a>").append(proImg).attr("href","tofontProductInfo?psId="+item.psId);
			//alert(item.psId)
			if(item.psType==1){
				var proType=$("<div></div>").addClass("product-one").append("待上架");
			}else if(item.psType==2){
				var proType=$("<div></div>").addClass("product-one").append("众筹中");
			}else if(item.psType==3){
				var proType=$("<div></div>").addClass("product-one").append("众筹成功");
			}
			var div1=$("<div></div>").addClass("product-list-lpic").append(proA).append(proType);
			var proA1=$("<a></a>").append(item.psName).attr("href","#");
			var proName=$("<p></p>").append(proA1);
			
			var Dcl=item.psGetmoney/item.psMoney*100;
			//alert(item.psMoney);
			var proDcl=$("<dt></dt>").append(Dcl).append("%");
			var proDname=$("<dd></dd>").append("达成率");
			var dl1=$("<dl></dl>").append(proDcl).append(proDname);
			var proMoney=$("<dt></dt>").append(item.psGetmoney);
			var proMname=$("<dd></dd>").append("已筹金额");
			var dl2=$("<dl></dl>").append(proMoney).append(proMname);
			var proPeople=$("<dt></dt>").append(item.psGetpeople);
			var proPname=$("<dd></dd>").append("支持人数");
			var dl3=$("<dl></dl>").append(proPeople).append(proPname);
			var div2=$("<div></div>").addClass("product-list-lmin").append(dl1).append(dl2).append(dl3);
			$("<li></li>").addClass("zcz")
			.append(div1)
			.append(proName)
			.append(div2)
			.appendTo("#product-list-l");
		});
	}
	
	function build_pro_table3(result){
		//清空div
		$("#product-list-l").empty();
		var product=result.extend.list;
		$.each(product,function(index,item){
			//alert(item.psVideo);
			var proImg=$("<img/>").attr("src",item.psVideo);
			var proA=$("<a></a>").append(proImg).attr("href","tofontProductInfo?psId="+item.psId);
			//alert(item.psId)
			if(item.psType==1){
				var proType=$("<div></div>").addClass("product-one").append("待上架");
			}else if(item.psType==2){
				var proType=$("<div></div>").addClass("product-one").append("众筹中");
			}else if(item.psType==3){
				var proType=$("<div></div>").addClass("product-one").append("众筹成功");
			}
			var div1=$("<div></div>").addClass("product-list-lpic").append(proA).append(proType);
			var proA1=$("<a></a>").append(item.psName).attr("href","#");
			var proName=$("<p></p>").append(proA1);
			
			var Dcl=item.psGetmoney/item.psMoney*100;
			//alert(item.psMoney);
			var proDcl=$("<dt></dt>").append(Dcl).append("%");
			var proDname=$("<dd></dd>").append("达成率");
			var dl1=$("<dl></dl>").append(proDcl).append(proDname);
			var proMoney=$("<dt></dt>").append(item.psGetmoney);
			var proMname=$("<dd></dd>").append("已筹金额");
			var dl2=$("<dl></dl>").append(proMoney).append(proMname);
			var proPeople=$("<dt></dt>").append(item.psGetpeople);
			var proPname=$("<dd></dd>").append("支持人数");
			var dl3=$("<dl></dl>").append(proPeople).append(proPname);
			var div2=$("<div></div>").addClass("product-list-lmin").append(dl1).append(dl2).append(dl3);
			$("<li></li>").addClass("zcz")
			.append(div1)
			.append(proName)
			.append(div2)
			.appendTo("#product-list-l");
		});
	}
	//解析显示分页条
	function build_page_nav(result){
    	   $("#page_nav_area").empty();
    	   var ul=$("<ul></ul>").addClass("pagination");
    	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
    	   if(result.extend.pageInfo.hasPreviousPage==false){
    		   firstPageLi.addClass("disabled");
    		   prePageLi.addClass("disabled");
    	   }else{    		   
    	   prePageLi.click(function(){
    		   to_page(result.extend.pageInfo.pageNum-1);
    	   });
    	   firstPageLi.click(function(){
    		   to_page(1);
    	   });
    	   }
    	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
    	   
    	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    	   if(result.extend.pageInfo.hasNextPage==false){
    		   nextPageLi.addClass("disabled");
    		   lastPageLi.addClass("disabled");
    	   }else{    		   
    	   nextPageLi.click(function(){
    		   to_page(result.extend.pageInfo.pageNum+1);
    	   });
    	   lastPageLi.click(function(){
    		   to_page(result.extend.pageInfo.pages);
    	   });
    	   }
    	   
    	   ul.append(firstPageLi).append(prePageLi);
    	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
    	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
    		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
    		   if(result.extend.pageInfo.pageNum==item){
    			   numLi.addClass("active");
    		   }
    		   numLi.click(function(){
    			   to_page(item);
    		   });
    		   ul.append(numLi);
    	   });
    	   ul.append(nextPageLi).append(lastPageLi);
    	   //把ul添加到nav
    	   ul.appendTo("#page_nav_area");
       }
	//教育助学
	 $("#p1").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psPstId="+1;
		$.ajax({
			url:"getAllProjectsByPstName",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table1(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	//爱心环保
	$("#p2").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psPstId="+2;
		$.ajax({
			url:"getAllProjectsByPstName",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table1(result);
				//显示分页按钮
				build_page_nav1(result);
			}
		});
	});
	//扶贫助困
	$("#p3").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psPstId="+3;
		$.ajax({
			url:"getAllProjectsByPstName",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table1(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	//公益创业
	$("#p4").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psPstId="+4;
		$.ajax({
			url:"getAllProjectsByPstName",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table1(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	//公益活动
	$("#p5").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psPstId="+5;
		$.ajax({
			url:"getAllProjectsByPstName",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table1(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	
	$("#A").click(function(){
		alert("项目详情");
		$("#product-con").empty();
		
	}); 
	
	//待上架
	$("#t1").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psType="+1;
		$.ajax({
			url:"getAllProjectsByPsType",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table3(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	
	//众筹中
	$("#t2").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psType="+2;
		$.ajax({
			url:"getAllProjectsByPsType",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table3(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
	//众筹成功
	$("#t3").click(function(){
		//清空众筹项目数据
		$("#product-list-l").empty();
		//清空分页按钮
		$("#page_nav_area").empty();
		var da="psType="+3;
		$.ajax({
			url:"getAllProjectsByPsType",
			data:da,
			type:"GET",
			success:function(result){
				//显示数据
				build_pro_table3(result);
				//显示分页按钮
				//build_page_nav1(result);
			}
		});
	});
</script>
</body>
</html>